<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>import命令</title>
</head>
<body>
    <h1>import命令</h1>

    <script type="module">
        // 基本用法
        import { firstName, lastName, year } from './profile.js';

        // 重命名导入
        import { lastName as surname } from './profile.js';

        // 整体导入
        import * as circle from './circle.js';
        console.log('圆的面积是：' + circle.area(4));
        console.log('圆的周长是：' + circle.circumference(14));

        // 默认导入
        import defaultFunction from './module.js';

        // 同时导入默认和具名成员
        import defaultMember, { member1, member2 } from './module.js';

        // 导入时执行模块
        import './lodash.js';

        // 动态导入
        const modulePath = './dynamicModule.js';
        import(modulePath)
            .then(module => {
                console.log('动态导入成功:', module);
            })
            .catch(err => {
                console.error('动态导入失败:', err);
            });

        // 条件导入
        if (condition) {
            import('./moduleA.js').then(/* ... */);
        } else {
            import('./moduleB.js').then(/* ... */);
        }

        // 异步导入多个模块
        Promise.all([
            import('./module1.js'),
            import('./module2.js'),
            import('./module3.js')
        ]).then(([module1, module2, module3]) => {
            // 使用模块
        });
    </script>
</body>
</html> 